Chashi
Chashi - Agriculture & Organic Food HTML5 Template Pack
- Created: 07/03/2020
- Latest Update: 18/04/2021
- by: LabArtisan
- email: labartisan@codexcoder.com
Installation
Follow the steps below to get started with chashi Agriculture & Organic Food HTML Template Pack :
-
Open the
Package/chashiFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
chashi/assets- Stylesheets, JavaScript, Fonts etc Folder -
chashi/assets/images- Images Folder -
chashi/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Complete SASS files
- Bootstrap 5x
- Fontawesome Used
- Icofonts Used
- SwiperSlider Used
- Google Font Used
- Lightcase Used
- Google Map
- Eye Catching Design
- W3C Valid Code
HTML Structure
chashi has follows a simple coding structure. here is the sample:
<!DOCTYPE html> <html lang="en"> <head> <title>chashi</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- google fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i, 700,700i,900,900i&display=swap" rel="stylesheet"> <link rel="shortcut icon" type="image/x-icon" href="assets/images/x-icon/agricul.png"> <link rel="stylesheet" href="assets/css/animate.css"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/all.min.css"> <link rel="stylesheet" href="assets/css/icofont.min.css"> <link rel="stylesheet" href="assets/css/lightcase.css"> <link rel="stylesheet" href="assets/css/swiper.min.css"> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <!-- Header section start here --> <header class="header-section transparent-header"> <div class="header-area"> <div class="container"> <nav class="navbar navbar-expand-lg"> <div class="primary-menu"> <div class="logo"> <a href="index.html"><img src="assets/images/logo/01.png" alt="logo"></a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="icofont-navigation-menu"></i> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="main-area"> <div class="main-menu"> <ul class="agri-ul"> <li class="active"><a href="#">Home</a> <ul class="agri-ul"> <li class="active"><a href="index.html">Agricul Farm</a></li> <li><a href="index-2.html">Agricul Farm2</a></li> <li><a href="index-3.html">Agricul Farm3</a></li> <li><a href="index-4.html">Agricul Farm4</a></li> </ul> </li> <li> <a href="#">Pages</a> <ul class="agri-ul"> <li><a href="about.html">About Page</a></li> <li> <a href="#0">Services Page</a> <ul class="agri-ul"> <li><a href="service.html">Services Page</a></li> <li><a href="service-single.html">Services detalis Page</a></li> </ul> </li> <li><a href="team.html">Team Page</a></li> <li><a href="faq-page.html">Faq Page</a></li> <li><a href="404.html">404 Page</a></li> </ul> </li> <li> <a href="#">Gallery</a> <ul class="agri-ul"> <li><a href="gallery-grid2.html">Gallery 2 Grid</a></li> <li><a href="gallery-masonary.html">Gallery Masonary</a></li> </ul> </li> <li> <a href="#">Blog</a> <ul> <li><a href="blog.html">Blog Right Sidebar</a></li> <li><a href="blog-ls.html">Blog Left Sidebar</a></li> <li><a href="blog-single.html">Blog Single Page</a></li> </ul> </li> <li> <a href="#">Shop</a> <ul class="agri-ul"> <li><a href="product-page.html">Product</a></li> <li><a href="product-single.html">Product Single</a></li> <li><a href="cart-page.html">Cart Page</a></li> </ul> </li> <li><a href="contact-us.html">Contact</a></li> </ul> </div> <div class="header-btn"> <a href="#" class="lab-btn"><span>Get in Touch</span></a> </div> </div> </div> </div> </nav> </div> </div> </header> <!-- Header section ending here --> <!-- Banner Section Start Here --> <div class="banner banner-pad-1 bg_img"> <div class="container"> <div class="banner-content"> <div class="banner-title">Agricul Farm</div> <div class="banner-desc">Dynamically supply web-enabled portals for high standards income and business Completely productivate optimal sources rather than strategic.</div> <a href="#" class="lab-btn"><span>Discover </span></a> </div> </div> </div> <!-- Banner Section Ending Here --> <!-- footer section start here --> <footer class="footer-section padding-tb pb-0"> <div class="container"> <div class="footer-top"> <div class="row"> <div class="col-xl-3 col-md-6 col-12"> <div class="footer-item"> <div class="footer-inner"> <div class="footer-logo"> <img src="assets/images/logo/01.png" alt="footer-logo"> </div> <div class="footer-desc"> <p>Conveniently customizec web services aggregate frictionle internet withouevs Conveniently customizec.</p> <p>aggregate frictionle without aggregate Conveniently customizec efrictionle.</p> </div> </div> </div> </div> <div class="col-xl-3 col-md-6 col-12"> <div class="footer-item footer-addtess"> <div class="footer-inner"> <div class="footer-title"> <h5>Keep In Touch</h5> </div> <div class="footer-body"> <ul class="agri-ul"> <li> <div class="icon"> <i class="icofont-google-map"></i> </div> <div class="detalis"> <p>Sector # 48,123 Vokte Street, Melborn city, Australia</p> </div> </li> <li> <div class="icon"> <i class="icofont-phone"></i> </div> <div class="detalis"> <p>+88978-658-125, 0078-98-954, +1655-456-523</p> </div> </li> <li> <div class="icon"> <i class="icofont-envelope"></i> </div> <div class="detalis"> <p>chashi@gmail.com</p> </div> </li> </ul> </div> </div> </div> </div> <div class="col-xl-3 col-md-6 col-12"> <div class="footer-item footer-blog"> <div class="footer-inner"> <div class="footer-title"> <h5>chashi Product</h5> </div> <div class="footer-body"> <ul class="agri-ul"> <li> <div class="thumb"> <a href="blog-single.html"><img src="assets/images/blog/01.jpg" alt="footer-blog"></a> </div> <div class="detalis"> <a href="blog-single.html"><h5>Fruits &Vegetable</h5></a> <h6>$24.99</h6> </div> </li> <li> <div class="thumb"> <a href="blog-single.html"><img src="assets/images/blog/02.jpg" alt="footer-blog"></a> </div> <div class="detalis"> <a href="blog-single.html"><h5>Natural &Honey</h5></a> <h6>$25.99</h6> </div> </li> </ul> </div> </div> </div> </div> <div class="col-xl-3 col-md-6 col-12"> <div class="footer-item footer-gallery"> <div class="footer-inner"> <div class="footer-title"> <h5>chashi Product</h5> </div> <div class="footer-body"> <ul class="agri-ul"> <li><a href="#"> <img src="assets/images/gallery/01.jpg" alt="footer-gallery"></a></li> <li><a href="#"> <img src="assets/images/gallery/02.jpg" alt="footer-gallery"></a></li> <li><a href="#"> <img src="assets/images/gallery/03.jpg" alt="footer-gallery"></a></li> <li><a href="#"> <img src="assets/images/gallery/04.jpg" alt="footer-gallery"></a></li> <li><a href="#"> <img src="assets/images/gallery/05.jpg" alt="footer-gallery"></a></li> <li><a href="#"> <img src="assets/images/gallery/06.jpg" alt="footer-gallery"></a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="footer-bottom"> <p>© 2020<a href="index.html" target="_blank"><span>chashi</span></a>All Rights Reserved By <a href="https://themeforest.net/user/labartisan" target="_blank"><span>LabArtisan</span></a></p> </div> </div> </footer> <!-- footer section ending here --> <!-- scrollToTop start here --> <a href="#" class="scrollToTop"><i class="icofont-swoosh-up"></i><span class="pluse_1"></span> <span class="pluse_2"></span></a> <!-- scrollToTop ending here --> <script src="assets/js/jquery.js"></script> <script src="assets/js/fontawesome.min.js"></script> <script src="assets/js/waypoints.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/wow.min.js"></script> <script src="assets/js/swiper.min.js"></script> <script src="assets/js/jquery.countdown.min.js"></script> <script src="assets/js/jquery.counterup.min.js"></script> <script src="assets/js/isotope.pkgd.min.js"></script> <script src="assets/js/lightcase.js"></script> <script src="assets/js/functions.js"></script> </body> </html>
CSS Structure
We are using several CSS files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- Animate css used
- Bootstrap css used
- Lightcase used
- Swiper used
- ajax used
- Favicon used
- Fontawesome used
- SwiperSlider used
- Style.css used
- and some other necessary css files
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
/*! @@@@@@@@@@@@@@@@@@@@@@ Template Name: chashi Template URI: https://themeforest.net/user/labartisan Author: LabArtisan Author URI: https://themeforest.net/user/labartisan Description: Description Version: 1.0.0 Text Domain: chashi Tags: agriculture, agriculture farmer, dairy, dairy farm, eco, eco farm, farm, farmers, farming, health, organic, organic food, organic Products, retail, vegetables @@@@@@@@@@@@@@@@@@@@@@ */ /* @@@@@@@@@@@@@@@@@@@@@@ >>> TABLE OF CONTENTS START: 01. Normalize CSS 02. Global CSS 03. Header * Style-1 * Style-2 * Style-3 * Mobile Menu 04. Banner * Style-1 * Style-2 * Style-3 05. Page Header * Style-1 06. Feature Section 07. About Section * Style-1 * Style-2 * Style-3 08. Product Section * Style-1 * Style-2 * Style-3 * Style-4 * Grid Style * Masonary Style 09. ABS Product 10. Agricul Ffarm Section 11. Agricul Fruits Section 12. Team Member Section 13. Testimonial Section * Style-1 * Style-2 * Style-3 14. Sponsor Section 15. Newsletter Section 16. Counterup Section 17. Countdown Section 18. Offer Section 19. Contact Section 20. Faq Section 21. Fore Zero 22. Blog * Style-1 * Style-2 * Blog Single 23. Widget 24. Shop Page * Shop Single * cart Page >>> TABLE OF CONTENTS END: @@@@@@@@@@@@@@@@@@@@@@ */ * { margin: 0; padding: 0; box-sizing: border-box; outline: none; box-shadow: none; } body { background: #fff; color: #716c80; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: 700; } a > h1, a > h2, a > h3, a > h4, a > h5, a > h6 { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } h1 { font-size: 72px; } h2 { font-size: 30px; } h3 { font-size: 20px; } h4 { font-size: 20px; } h5 { font-size: 20px; margin-top: -5px; } h6 { font-size: 16px; } p { margin-bottom: 15px; font-weight: 400; font-size: 16px; color: #716c80; line-height: 24px; } a { color: #181818; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; display: inline-block; } a:hover, a:focus, a:active, a:visited { color: #181818; text-decoration: none; outline: none; } img { height: auto; max-width: 100%; } @media (min-width: 576px) { h1 { font-size: 72px; line-height: 80px; } h2 { font-size: 48px; line-height: 60px; } h3 { font-size: 36px; line-height: 45px; } h4 { font-size: 30px; line-height: 40px; } h5 { font-size: 20px; line-height: 28px; } h6 { font-size: 16px; line-height: 34px; } } .agri-ul { margin: 0; } .agri-ul li { list-style: none; }.header-section .header-area.menu-fixed { position: fixed; width: 100%; top: 0; z-index: 99; background: #fff; box-shadow: 0 0 3px rgba(81, 136, 136, 0.1); } .header-section .primary-menu { align-items: center; justify-content: space-between; } .header-section .primary-menu .logo a { display: block; } .header-section .primary-menu .logo a img { display: block; } .header-section .primary-menu .main-area { align-items: center; } .header-section .primary-menu .main-area .main-menu ul { padding: 0; margin: 0; } .header-section .primary-menu .main-area .main-menu ul li { padding: 0; } .header-section .primary-menu .main-area .main-menu ul li.active > a, .header-section .primary-menu .main-area .main-menu ul li:hover > a { color: #ffb11f; } .header-section .primary-menu .main-area .main-menu ul li a { padding: 25px 20px; color: #181818; font-size: 16px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .header-section .primary-menu .main-area .main-menu ul li ul { min-width: 200px; background: #ffb11f; box-shadow: 0 0 5px rgba(136, 136, 136, 0.1); display: block; top: 100%; transform: scaleY(0); transform-origin: top; z-index: 999; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .header-section .primary-menu .main-area .main-menu ul li ul li a { font-size: 98%; padding: 10px 15px; color: #fff; width: 100%; border-bottom: 1px solid #ffffff40; } .header-section .primary-menu .main-area .main-menu ul li ul li a:hover { padding-left: 20px; color: #ffb11f; background: #fff; } .header-section .primary-menu .main-area .main-menu ul li ul li.active > a, .header-section .primary-menu .main-area .main-menu ul li ul li:hover > a { background: #fff; color: #ffb11f; } .header-section .primary-menu .main-area .main-menu ul li ul li:last-child a { border-bottom: none; } .header-section .primary-menu .main-area .main-menu ul li ul li.menu-item-has-children { margin-right: 0px; } .header-section .primary-menu .main-area .main-menu ul li ul li.menu-item-has-children a::after { right: 15px; transform: translateY(-50%) rotate(-90deg); } .header-section .primary-menu .main-area .main-menu ul li ul li ul { left: 100%; top: 0; } .header-section .primary-menu .main-area .main-menu ul li.menu-item-has-children { margin-right: 16px; position: relative; } .header-section .primary-menu .main-area .main-menu ul li.menu-item-has-children > a::after { top: 50%; right: 0; transform: translateY(-50%); font-weight: 400; content: "\ea99" !important; font-family: IcoFont !important; } .header-section .primary-menu .main-area .main-menu ul li:hover > ul { transform: scaleY(1); } .header-section .primary-menu .main-area .header-btn { margin-left: 15px; } .header-section .primary-menu .main-area .header-btn .lab-btn { display: block; padding: 13px 30px; } .header-section .header-top { background: #ffb11f; padding: 10px 0; }Js Structure
We are using several Js files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery.js used
- fontawesome.js used
- lightcase.js used
- waypoints.min.js used
- bootstrap.min.js used
- jquery.countdown.min.js used
- jquery.counterup.min.js used
- isotope.pkgd.min.js used
- swiper.min.js used
- functions.js used
- and some other necessary css files
functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :(function($){ "use strict"; $(window).on('load', function(){ $('.preloader').fadeOut(1000); }) $(document).ready(function(){ // lightcase $('a[data-rel^=lightcase]').lightcase(); // search cart option $(document).on('click','.cart-option',function(){ $(".cart-option").toggleClass("open"); }); $(document).on('click','.search-option, .search-close',function(){ $(".search-input").toggleClass("open"); }); // Header Section Menu Part $("ul li ul").parent("li").addClass("menu-item-has-children"); $(".shop-menu>li .shop-submenu").parent("li").children("a").addClass("dd-icon-down"); // drop down menu width overflow problem fix $('ul').parent().on('hover', function() { var menu = $(this).find("ul"); var menupos = $(menu).offset(); if (menupos.left + menu.width() > $(window).width()) { var newpos = -$(menu).width(); menu.css({ left: newpos }); } }); // mobile menu responsive $(document).on('click','.header-bar',function(){ $(".header-bar").toggleClass("close"); $(".mobile-menu").toggleClass("open"); }); //mobile drodown menu display $('.mobile-menu-area ul li a, .shop-menu li a').on('click', function(e) { var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(1000,"swing"); } else { element.addClass('open'); element.children('ul').slideDown(1000,"swing"); element.siblings('li').children('ul').slideUp(1000,"swing"); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(1000,"swing"); } });Credits
jQuery
CSS & Fonts